<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />

    <style>
        /*.goods {
            border: 1px solid #ccc;
        }*/

        .goods img {
            height: 220px;

        }

        .goods p {
            line-height: 1.5rem;
        }

        .goods .aui-row {
            line-height: 1.5rem;
        }
    </style>

</head>

<body>
  <div id="aui-slide3">
      <div class="aui-slide-wrap" >
          <div class="aui-slide-node ">
              <img src="../image/l1.png" />
          </div>
          <div class="aui-slide-node ">
              <img src="../image/l2.png" />
          </div>
          <div class="aui-slide-node ">
              <img src="../image/l3.png" />
          </div>
      </div>
      <div class="aui-slide-page-wrap"><!--分页容器--></div>
  </div>


    <section class="aui-grid" id="banner">
        <img src="./img/index_header.jpg" alt="">
    </section>

    <section class="aui-grid">
        <img src="./img/index_1805021537362148.png" alt="">
    </section>
    <section class="aui-grid">
        <div class="aui-row" id="list">

        </div>
          <div class="push-status" id="pushStatus" style="text-align:center;margin:20px">上拉显示更多</div>
    </section>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="./conf/config.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<!--引入dot模板引擎-->
<script type="text/javascript" src="../script/doT.min.js"></script>
<!-- 模板  幻灯片-->

<script type="text/template" id="template">

    {{~it:value:index}}
    <div class="aui-col-xs-6 goods" style="padding:0 0;" tapmode onclick="fnOpenWareWin('{{=value.id}}');">
        <img src="{{= fnSiteUrl(value.thumb)}}" alt="" width="200px" height="200px">
        <div class="aui-row" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 10px">
            {{= value.title}}
        </div>
        <p style="overflow:hidden;"> <span style="text-decoration:line-through;color:red">{{= value.mod_price }}</span> &nbsp;&nbsp;&nbsp;
            <span>仅剩{{= value.number}}份</span></p>
    </div>
    {{~}}
</script>
<script type="text/javascript">

    apiready = function() {
      fnUpdateSlide(); //发送请求加载数据分配到模板
        fnGetGoodsList(); //发送请求加载商品数据分配到模板
        initRefresh();
        initEventListenter();
        //addPushUp();//上啦加载；
    };
    count = "";
    page = 1;
    function fnGetGoodsList(load_more) {
        // api.showProgress({
        //     title: '努力加载中...',
        //     text: '先喝杯茶...',
        //     modal: false
        // });
        if (load_more) {
            page++;
        } else {
            page = 1;
        }
        api.ajax({
            //http://test.renqishike.com/index.php?m=api&c=appnew&a=goodslists&catid=0&is_point=0&is_vip=0&mod=trial&orderby=id&orderway=desc&page=1&trial_type=0
            url: SITE_URL+"index.php?m=api&c=appnew&a=goodslists&catid=0&is_point=0&is_vip=0&mod=trial&orderby=id&orderway=desc&page=" + page + "&trial_type=0",
            method: 'GET',
        }, function(ret, err) {
            if (ret.status==1) {

                //每十条是一组数据；
                count = ret.count; //查到符合要求的数据总条数；
                pageTot = Math.ceil(count / 10);
                //判断总的页数
                //alert(count);
                //alert(pageTot);
                if (pageTot <=page) {
                    //如果大于；
                    var notice = $api.byId('pushStatus'); //获取节点
                    $api.html(notice, "没有啦！");
                api.refreshHeaderLoadDone(); //下拉刷新隐藏
                    fnUpdateGoodsList(ret, load_more);
                } else {
                    api.refreshHeaderLoadDone(); //下拉刷新隐藏
                    fnUpdateGoodsList(ret, load_more);
                }
            } else {
              //api.refreshHeaderLoadDone(); //下拉刷新隐藏
                // api.alert({
                //     msg: JSON.stringify(err)
                // });
            }
        });
    }
    //数组分配到模板；
    function fnUpdateGoodsList(ret, load_more) {

        var list = $api.byId('list'); //获取节点
        //var str={"array":["banana","apple","orange"]};
        // 1. 编译模板函数
        var tempFn = doT.template($api.byId('template').innerHTML); //找到模板多次使用
        // 2. 多次使用模板函数
        var resultText = tempFn(ret.lists);
        if (load_more) {
            $api.append(list, resultText);
        } else {
            $api.html(list, resultText);
        }
        api.hideProgress();
        //$api.html(list, resultText);

    }

    function fnUpdateSlide() {
      api.ajax({
          url: SITE_URL+'index.php?m=api&c=appnew&a=focus&num=3&orderby=id&orderway=desc&type=1',
          method: 'GET',

      },function(ret, err){
      //  alert(JSON.stringify(ret));
      });

        // var banner = $api.byId('aui-slide3');
        // api.imageCache({ //图片缓存，防止卡顿
        //     url: wareTypeList[api.pageParam.wareTypeIndex].banner.url
        // }, function(ret, err) {
        //     if (ret) {
        //         //alert(JSON.stringify(ret));
        //         if (ret && ret.status) {
        //             banner.src = ret.url;
        //         }
        //     } else {
        //         alert(JSON.stringify(err));
        //     }
        // });

    }

    function fnUpdateBanner() {
        var banner = $api.byId('banner');
        api.imageCache({ //图片缓存，防止卡顿
            url: wareTypeList[api.pageParam.wareTypeIndex].banner.url
        }, function(ret, err) {
            if (ret) {
                //alert(JSON.stringify(ret));
                if (ret && ret.status) {
                    banner.src = ret.url;
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
    //下拉刷新，松开刷新
    function initRefresh() {
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function(ret, err) {
            fnGetGoodsList();
        });
    }



    //打开商品详情页面
    function fnOpenWareWin(wareId_) {
        api.openWin({
            name: 'ware',
            url: './ware.html',
            pageParam: {
                wareId: wareId_
            },

        });
    }

    function initEventListenter() {
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 300
            }
        }, function(ret, err) {

            fnGetGoodsList(true);
        });
    }
  //   var slide = new auiSlide({
  //      container:document.getElementById("aui-slide"),
  //      // "width":300,
  //      "height":260,
  //      "speed":300,
  //      "pageShow":true,
  //      "pageStyle":'dot',
  //      "loop":true,
  //      'dotPosition':'center',
  //      currentPage:currentFun
  //  })

   function currentFun(index) {
       console.log(index);
   }
    var slide3 = new auiSlide({
       container:document.getElementById("aui-slide3"),
       // "width":300,
       "speed":500,
       "autoPlay": 3000, //自动播放
       "loop":true,
       "pageShow":true,
       "pageStyle":'dot',
       'dotPosition':'center'
   })
</script>

</html>
